<script lang="ts">
import { spring } from 'svelte/motion';

const count = 0;

const displayed_count = spring();
$: displayed_count.set(count);
$: offset = modulo($displayed_count, 1);

function modulo(n: number, m: number) {
  // handle negative numbers
  return ((n % m) + m) % m;
}
</script>

<div class="counter">
	<button on:click={() => (count -= 1)} aria-label="Decrease the counter by one">
		<svg aria-hidden="true" viewBox="0 0 1 1">
			<path d="M0,0.5 L1,0.5" />
		</svg>
	</button>
</div>

<style>
	.counter {
		display: flex;
		border-top: 1px solid rgba(0, 0, 0, 0.1);
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		margin: 1rem 0;
	}
</style>
